<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>群聊(3)</title>
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="email=no">
  <style>
    body,ul,li{margin:0;padding:0;background:#ebebeb;list-style:none;}
    .app,.loading{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;}
    .talk-box{font-size:0;position:fixed;bottom:0;left:0;width:100%;padding-top:13.2%;background:url(img/weixin/tek.jpg) no-repeat top center/100% auto;z-index:20;}
    .talk-box img{width:100%;}

    .common .layer1{padding-top:37.5%;background:url(img/weixin/layer1.jpg) no-repeat top center/100% auto;}
    .common .layer2{padding-top:21.5%;background:url(img/weixin/layer2.jpg) no-repeat top center/100% auto;}
    .common .layer3{padding-top:16.5%;background:url(img/weixin/layer3.jpg) no-repeat top center/100% auto;}
    .common .layer4{padding-top:28.5%;background:url(img/weixin/layer4.jpg) no-repeat top center/100% auto;}
    .common .layer5{padding-top:16.8%;background:url(img/weixin/layer5.jpg) no-repeat top center/100% auto;}
    .common .layer6{padding-top:28.5%;background:url(img/weixin/layer6.jpg) no-repeat top center/100% auto;}
    .common{position:relative;top:27rem;-webkit-transition:top .2s ease-in-out;transition:top .3s ease-in-out;}
    .common li{position: relative;-webkit-transition:transform .2s ease-in-out .2s;transition:transform .2s ease-in-out .2s;}

    .dely{transform:translate(0,1rem);}
    .loading{background-color:#fff;text-align:center;z-index:90;}
    .loading-content{position:absolute;width:100%;top:50%;left:0;margin-top:-100px;}
    .loading-content img{width: 7rem;}
    .load-p{color:rgb(114,114,114);font-weight:bold;margin-top:5px;font-size: .75rem;font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;}

    .user-r{position:absolute;top:.05rem;right:.5rem;width:2.1rem;height:2.1rem;}
    .user-l{position:absolute;top:0;left:.5rem;width:2.1rem;height:2.1rem;}
    .layer6 .user-l{top:.03rem;}
    .layer3 .user-r{top:.01rem;}
  </style>
</head>
<body>
<div class="loading">
  <div class="loading-content">
    <img src="img/weixin/logo.png" alt="logo">
    <p class="load-p">0%</p>
  </div>
</div>
<div class="app">
  <ul class="common">
    <li class="layer1 dely"></li>
    <li class="layer2 dely">
      <div class="user-l" style="background: url(img/qb.jpg) no-repeat center/cover;"></div>
    </li>
    <li class="layer3 dely">
      <div class="user-r" style="background: url(img/qb.jpg) no-repeat center/cover;"></div>
    </li>
    <li class="layer4 dely"></li>
    <li class="layer5 dely">
      <div class="user-r" style="background: url(img/qb.jpg) no-repeat center/cover;"></div>
    </li>
    <li class="layer6 dely">
      <div class="user-l" style="background: url(img/qb.jpg) no-repeat center/cover;"></div>
    </li>
  </ul>
  <div class="talk-box"></div>
</div>
<script>
  /* 禁用全局默认事件 */
  document.addEventListener('touchmove', function (e) {
    e.preventDefault();
  }, false);

  /* 加载音效 */
  var Media = new Audio('audio/weixin.mp3');
  Media.addEventListener('loadeddata', function () {
    loaded();
  });

  /* 加载图片 */
  var imgarr = [
    'img/weixin/tek.jpg',
    'img/weixin/layer1.jpg',
    'img/weixin/layer2.jpg',
    'img/weixin/layer3.jpg',
    'img/weixin/layer4.jpg',
    'img/weixin/layer5.jpg',
    'img/weixin/layer6.jpg'
  ];
  for (var i = 0; i < imgarr.length; i++) {
    var image = new Image();
    image.src = imgarr[i];
    image.addEventListener('load', function () {
      loaded();
    }, false);
  }

  /* 进度条 */
  var load = 0;
  var size = imgarr.length + 1;
  function loaded() {
    ++load;
    document.querySelector('.load-p').innerHTML = (load / size * 100).toFixed(1) + '%';
    if (load == size) {

    }
  }

  /* 动画 */
  window.onload = function () {
    document.querySelector('.loading').style.display = 'none';
    var heights = [];
    var layer = document.querySelectorAll('li');
    for (var i = 0; i < layer.length; i++) {
      heights.push(layer[i].offsetHeight);
    }
    var _h = document.body.scrollHeight - document.querySelector('.talk-box').offsetHeight;
    document.querySelector('.common').style.top = _h + 'px';

    var j = 0;
    var zem = _h;
    function speack() {
      if (j < heights.length) {
        zem = zem - heights[j];
        document.querySelector('.common').style.top = zem + 'px';
        document.getElementsByTagName('li')[j].classList.remove('dely');
        Media.play();
        setTimeout(function () {
          speack();
        }, 1800);
      } else {
        //window.location.href = 'index.html';
      }
      j++;
    }

    speack();
  };

  var docEl = document.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
        docEl.style.fontSize = 20 * (docEl.clientWidth / 375) + 'px';
      };
  window.addEventListener(resizeEvt, recalc, false);
  document.addEventListener('DOMContentLoaded', recalc, false);
</script>
</body>
</html>
